<template>
  <el-dialog
    :model-value="visible"
    :title="title"
    :width="width"
    :fullscreen="fullscreen"
    :close-on-click-modal="closeOnClickModal"
    :close-on-press-escape="closeOnPressEscape"
    :show-close="showClose"
    :before-close="handleClose"
    :z-index="zIndex"
    :modal="modal"
    :lock-scroll="lockScroll"
    :custom-class="customClass"
    :append-to-body="appendToBody"
    @open="handleOpen"
    @opened="handleOpened"
    @close="handleClose"
    @closed="handleClosed"
  >
    <template v-if="$slots.header" #header>
      <slot name="header"></slot>
    </template>
    
    <div class="modal-content">
      <slot></slot>
    </div>
    
    <template v-if="$slots.footer" #footer>
      <slot name="footer"></slot>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
interface Props {
  visible: boolean
  title?: string
  width?: string | number
  fullscreen?: boolean
  closeOnClickModal?: boolean
  closeOnPressEscape?: boolean
  showClose?: boolean
  zIndex?: number
  modal?: boolean
  lockScroll?: boolean
  customClass?: string
  appendToBody?: boolean
}

const props = withDefaults(defineProps<Props>(), {
  title: '',
  width: '50%',
  fullscreen: false,
  closeOnClickModal: true,
  closeOnPressEscape: true,
  showClose: true,
  zIndex: 2000,
  modal: true,
  lockScroll: true,
  customClass: '',
  appendToBody: true
})

const emit = defineEmits<{
  'update:visible': [value: boolean]
  'open': []
  'opened': []
  'close': []
  'closed': []
}>()

const handleOpen = () => {
  emit('open')
}

const handleOpened = () => {
  emit('opened')
}

const handleClose = () => {
  emit('update:visible', false)
  emit('close')
}

const handleClosed = () => {
  emit('closed')
}
</script>

<style lang="scss" scoped>
.modal-content {
  max-height: 70vh;
  overflow-y: auto;
}

:deep(.el-dialog) {
  border-radius: 8px;
}

:deep(.el-dialog__header) {
  padding: 20px 20px 10px;
  border-bottom: 1px solid #ebeef5;
}

:deep(.el-dialog__body) {
  padding: 20px;
}

:deep(.el-dialog__footer) {
  padding: 10px 20px 20px;
  border-top: 1px solid #ebeef5;
}
</style> 
